<template>
  <div class="input-group">
    <template v-for="(item, index) in list">
      <input type="text" class="form-control" :placeholder="item.placeholder" aria-label="Search for..."
             v-if="item.type=='input'" v-model="item.value">
      <span class="input-group-btn" v-if="item.type=='button'">
      <button class="btn btn-secondary" type="button" @click="$emit('on-click', index)">Go!</button>
    </span>
    </template>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return [{
            type: 'input',
            value: '',
            placeholder: 'Search for...'
          }, {
            type: 'button'
          }]
        }
      }
    }
  }
</script>

<style scoped>
  @import '~bootstrap/dist/css/bootstrap.css';
</style>
